<template>
    <view class="dengLoadingVue">
        <view class="maskVueHiddenShow" v-if="statusLoading" @click="onCheckHiddenApi">
            <view class="maskVueHiddenShowWrapper">
                <image :src="'/images/loading.png' | formatImgUrl" mode="widthFix" class="maskVueHiddenShowWrapperGif"></image>
            </view>
			<view class="" style="color: #3D3D3D;font-size: 16px;margin-top: 15px;font-weight: bold;">
				正在加载
			</view>
        </view>
    </view>
</template>

<script>
	
    export default {
        props: {
            status:false,
        },
		created() {
			if (this.statusLoading == true) {
				var that = this
				// setTimeout(function(){
				// 	that.statusLoading = false
				// },5000)
			}
		},
        data() {
            return {
                statusLoading:true,
            };
        },
		watch:{
			status(e) {
				this.statusLoading = e
				
			}
		},
		methods: {
			onCheckHiddenApi() {
				this.statusLoading = false
			}
		}
    }
</script>

<style lang="scss">
	@keyframes loading-android {
		0% {
			transform: rotate(0deg);
		}
	
		100% {
			transform: rotate(360deg);
		}
	}
	
    .dengLoadingVue {
        .maskVueHiddenShow {
            z-index: 101;
            position: fixed;
            top: 50%;
            left: 50%;
			/* #ifndef APP */
			transform: translate(-50%,-50%);
			/* #endif */
            /* #ifdef APP */
            transform: translate(-50%,-100%);
            /* #endif */
            border-radius: 8px;
            background: #FFFFFF;
            display: flex;
			flex-direction: column;
            align-items: center;
            justify-content: center;
			padding: 13px;
			box-shadow: 0 0 10rpx 10rpx rgba(0,0,0,.05);
			
            .maskVueHiddenShowWrapper {
               
                display: flex;
                align-items: center;
                justify-content: center;
                .maskVueHiddenShowWrapperGif {
                    width: 98rpx;
                    height: 98rpx;
					animation: loading-android 1.5s ease-in-out infinite;
                }
            }
        }
    }
</style>
